<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>图书管理系统-首页</title>
	<!-- 引入Pacifico字体（Google Fonts） -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<!-- 引入图标库（补充水墨风图标样式） -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<style>
		/* 全局样式重置与基础设置：强化水墨质感 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Pacifico', cursive;
			/* 水墨风鼠标指针：细节强化风格 */
			cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="2.5" fill="%238c877d"/><path d="M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7z" fill="none" stroke="%238c877d" stroke-width="1"/></svg>'), auto;
		}

		body {
			/* 水墨古典背景：升级宣纸纹理+双层墨染效果 */
			background-color: #f5f1e6;
			background-image:
				/* 宣纸纤维纹理：更细腻的线条感 */
					url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238c877d' fill-opacity='0.07' fill-rule='evenodd'/%3E%3C/svg%3E"),
						/* 淡墨晕染：增加垂直方向渐变，模拟宣纸透墨 */
					linear-gradient(135deg, rgba(168, 162, 148, 0.06) 0%, rgba(245, 241, 230, 0) 60%),
					linear-gradient(to bottom, rgba(168, 162, 148, 0.03) 0%, rgba(245, 241, 230, 0) 100%);
			min-height: 100vh;
			padding: 20px 0;
			/* 防止背景滚动时偏移 */
			background-attachment: fixed;
		}

		/* 头部容器：升级卷轴质感 */
		.header-container {
			width: 80%;
			max-width: 1200px;
			margin: 0 auto 35px;
			padding: 25px 0;
			position: relative;
			text-align: center;
			/* 卷轴边缘暗纹：模拟装裱效果 */
			background-image: url("data:image/svg+xml,%3Csvg width='100' height='2' viewBox='0 0 100 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1h100' stroke='%238c877d' stroke-width='1' stroke-opacity='0.1'/%3E%3C/svg%3E");
			background-repeat: repeat-x;
			background-position: top 0 left 0, bottom 0 left 0;
			background-size: 100% 1px;
		}

		/* 标题样式：强化水墨书法感 */
		.header-container h1 {
			color: #3a362e;
			font-size: 38px;
			margin-bottom: 30px;
			position: relative;
			display: inline-block;
			letter-spacing: 2.5px;
			/* 文字轻微墨染效果 */
			text-shadow: 1px 1px 2px rgba(139, 134, 123, 0.1);
		}

		/* 标题下方水墨线条：升级毛笔笔触感 */
		.header-container h1::after {
			content: "";
			position: absolute;
			bottom: -12px;
			left: 15%;
			width: 70%;
			height: 1px;
			/* 模拟毛笔线条的粗细变化 */
			background: linear-gradient(90deg, transparent, #8c877d 30%, #8c877d 70%, transparent);
		}

		/* 导航菜单：增加水墨hover细节 */
		.nav-list {
			display: flex;
			justify-content: center;
			gap: 35px;
			margin-bottom: 35px;
			flex-wrap: wrap; /* 适配小屏幕自动换行 */
		}

		.nav-list li {
			list-style: none;
		}

		.nav-list li a {
			text-decoration: none;
			color: #3a362e;
			font-size: 19px;
			padding: 6px 15px;
			border-radius: 4px;
			transition: all 0.3s ease;
			position: relative;
			/* 增加点击区域 */
			display: inline-block;
		}

		/* 导航链接 hover 水墨效果：升级双层线条 */
		.nav-list li a::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 1px;
			background-color: #6b665d;
			transition: width 0.3s ease;
		}
		.nav-list li a::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 1px;
			background-color: #8c877d;
			transition: width 0.3s ease 0.1s; /* 延迟显示，增加层次感 */
		}

		.nav-list li a:hover {
			color: #6b665d;
			background-color: rgba(168, 162, 148, 0.12);
		}
		.nav-list li a:hover::after,
		.nav-list li a:hover::before {
			width: 100%;
		}

		/* 搜索表单：优化水墨质感 */
		.search-form {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 45px;
			align-items: center;
		}

		.search-form input[type="text"] {
			width: 320px;
			height: 42px;
			padding: 0 18px;
			/* 宣纸质感输入框：增加细微纹理 */
			background-color: rgba(255, 255, 255, 0.85);
			background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0z' fill='none' stroke='%238c877d' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
			border: 1px solid #8c877d;
			border-radius: 6px;
			color: #3a362e;
			font-size: 17px;
			transition: all 0.3s ease;
		}

		.search-form input[type="text"]:focus {
			outline: none;
			border-color: #6b665d;
			box-shadow: 0 0 0 2px rgba(107, 102, 93, 0.12), 0 2px 4px rgba(139, 134, 123, 0.05) inset;
			background-color: rgba(255, 255, 255, 0.9);
		}

		/* 搜索按钮：水墨按钮质感升级 */
		.search-form input[type="submit"] {
			height: 42px;
			padding: 0 22px;
			background-color: #3a362e;
			/* 模拟墨色渐变：增加层次感 */
			background-image: linear-gradient(145deg, #3a362e 0%, #4d483f 100%);
			color: #f5f1e6;
			border: none;
			border-radius: 6px;
			font-size: 17px;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.search-form input[type="submit"]:hover {
			background-image: linear-gradient(145deg, #4d483f 0%, #6b665d 100%);
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
		}

		.search-form input[type="submit"]:active {
			transform: translateY(0);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		/* 图书表格：强化水墨边框质感 */
		.book-table {
			border-collapse: collapse;
			width: 82%;
			max-width: 1050px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.8);
			/* 模拟宣纸装裱边框 */
			border: 1px solid #d4d0c8;
			border-radius: 8px;
			box-shadow:
					0 6px 16px rgba(139, 134, 123, 0.12),
					0 0 2px rgba(139, 134, 123, 0.05) inset;
			overflow: hidden; /* 裁剪边框圆角 */
		}

		.book-table th,
		.book-table td {
			padding: 14px 18px;
			text-align: center;
			border: 1px solid #d4d0c8;
			color: #3a362e;
			font-size: 17px;
			/* 单元格细微纹理：模拟宣纸 */
			background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10v10H0V0z' fill='none' stroke='%238c877d' stroke-width='0.5' stroke-opacity='0.03'/%3E%3C/svg%3E");
		}

		/* 表头样式：升级水墨标题栏 */
		.book-table th {
			background-color: rgba(168, 162, 148, 0.18);
			/* 表头墨色渐变 */
			background-image: linear-gradient(to right, rgba(168, 162, 148, 0.2), rgba(168, 162, 148, 0.1));
			font-weight: normal;
			letter-spacing: 1.2px;
			border-bottom: 2px solid #8c877d;
			color: #4d483f;
		}

		/* 表格行：增加奇偶行区分+hover水墨效果 */
		.book-table tr:nth-child(even) {
			background-color: rgba(168, 162, 148, 0.03);
		}
		.book-table tr:hover {
			background-color: rgba(168, 162, 148, 0.1);
			transition: background-color 0.3s ease;
		}

		/* 操作按钮样式：升级水墨链接 */
		.book-table td a {
			text-decoration: none;
			margin: 0 10px;
			color: #4a6b58; /* 淡墨绿：购买按钮 */
			transition: all 0.3s ease;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 4px 8px;
			border-radius: 4px;
		}

		.book-table td a i {
			font-size: 15px;
			opacity: 0.8;
		}

		.book-table td a:hover {
			text-decoration: underline;
			opacity: 0.9;
			background-color: rgba(74, 107, 88, 0.08);
		}

		/* 空数据提示样式：增加水墨意境 */
		.book-table .empty-tip {
			font-style: italic;
			color: #8c877d;
			letter-spacing: 1.2px;
			padding: 30px 0;
			/* 空数据提示背景：模拟留白 */
			background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 25c0 5.523 4.477 10 10 10s10-4.477 10-10-4.477-10-10-10-10 4.477-10 10z' fill='none' stroke='%238c877d' stroke-width='1' stroke-opacity='0.05'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
		}

		/* 响应式适配：优化小屏幕体验 */
		@media (max-width: 992px) {
			.book-table th,
			.book-table td {
				padding: 12px 12px;
				font-size: 16px;
			}
			.search-form input[type="text"] {
				width: 280px;
			}
		}

		@media (max-width: 768px) {
			.header-container {
				width: 95%;
				padding: 20px 0;
			}

			.header-container h1 {
				font-size: 32px;
				margin-bottom: 25px;
			}

			.nav-list {
				gap: 12px;
				margin-bottom: 30px;
			}

			.nav-list li a {
				font-size: 16px;
				padding: 5px 10px;
			}

			.search-form {
				gap: 10px;
				margin-bottom: 40px;
			}

			.search-form input[type="text"] {
				width: 220px;
				height: 40px;
				font-size: 16px;
			}

			.search-form input[type="submit"] {
				height: 40px;
				padding: 0 18px;
				font-size: 16px;
			}

			.book-table {
				width: 95%;
			}

			.book-table th,
			.book-table td {
				padding: 10px 6px;
				font-size: 14px;
			}

			.book-table td a {
				margin: 0 4px;
				font-size: 14px;
				gap: 4px;
			}

			.book-table .empty-tip {
				padding: 25px 0;
			}
		}

		/* 移动端表格横向滚动适配 */
		@media (max-width: 576px) {
			.table-wrapper {
				width: 95%;
				margin: 0 auto;
				overflow-x: auto; /* 横向滚动 */
				padding-bottom: 10px;
			}
			.book-table {
				width: 500px; /* 固定表格宽度，确保内容不挤压 */
				margin: 0;
			}
		}
	</style>
</head>
<body>
<!-- 头部容器：标题 + 导航 + 搜索 -->
<div class="header-container">
	<h1>图书管理系统-首页</h1>
	<ul class="nav-list">
		<li><a href="/book"><i class="fas fa-home" style="margin-right: 5px;"></i>首页</a></li>
		<li><a href="/paybook"><i class="fas fa-history" style="margin-right: 5px;"></i>购买记录</a></li>
		<li><a href="/user/logout"><i class="fas fa-sign-out-alt" style="margin-right: 5px;"></i>安全退出</a></li>
	</ul>
	<form action="/book/index" method="post" class="search-form">
		<input type="text" name="bookNameKey" placeholder="#(keyBookName ? keyBookName:'请输入要找的书名')" value="#(keyBookName ? keyBookName:'')" />
		<input type="submit" value="查找" />
	</form>
</div>

<!-- 表格外层容器：适配移动端横向滚动 -->
<div class="table-wrapper">
	<!-- 图书表格 -->
	<table class="book-table">
		<tr>
			<th>序号</th>
			<th>书名</th>
			<th>作者</th>
			<th>价格</th>
			<th>库存</th>
			<th>操作</th>
		</tr>
		#for( book : booklist)
		<tr>
			<td>#(for.count)</td>
			<td>#(book?.bookName)</td>
			<td>#(book?.bookAuthor)</td>
			<td>#(book?.bookPrice)</td>
			<td>#(book?.bookNum)</td>
			<td>
				<a href="/alipay?bookid=#(book.bookId)"><i class="fas fa-shopping-cart"></i> 购买</a>
			</td>
		</tr>
		#else
		<tr>
			<td colspan="6" class="empty-tip">暂无书籍信息</td>
		</tr>
		#end
	</table>
</div>
</body>
</html>